<template>
  <div class='pdf-wrapper' v-if='!loading'>
    <div class='pdf-detail'>
      <span class='detail-icon'
            :class='{
              pdf: /\.pdf$/.test(fileInfo.mediaName),
              doc: /\.(docx?|txt)$/.test(fileInfo.mediaName),
              ppt: /\.pptx?$/.test(fileInfo.mediaName),
              excel: /\.xlsx?$/.test(fileInfo.mediaName),
              video: /\.(mp4|avi|mov|rmvb|rm|wmv|mpg|mpeg)$/.test(fileInfo.mediaName),
              voice: /\.(cda|wav|mp3|aif|aiff|mid|wma|amr)$/.test(fileInfo.mediaName),
              image: /\.(jpg|jpeg|png|gif)$/.test(fileInfo.mediaName)
            }'>
          </span>
      <div class='detail-title'>{{fileInfo.mediaName}}</div>
      <div class='detail-info'>
        文件大小：{{formatMediaSize(fileInfo.mediaSize)}}<br>
        上传日期：{{fileInfo.createTime.slice(0, 10)}}
      </div>
    </div>
    <a class='pdf-btn' :href='fileInfo.mediaUrl' target='_blank' @click='startDownload'>
      <span>下载文件</span>
    </a>
    <a class='pdf-btn' :href='emailUrl' target='_blank' @click='startDownload'>
      <span>邮件发送</span>
    </a>
    <div class='pdf-tip'>
      邮件发送：请确保已安装邮件客户端，否则无效
    </div>
  </div>
</template>

<script>
export default {
  name: 'download',
  data () {
    return {
      fileId: '',
      loading: true,
      fileInfo: {
        mediaName: '',
        mediaSize: '',
        createTime: '',
        mediaUrl: ''
      },
      emailUrl: ''
    }
  },
  methods: {
    startDownload () {
      // 记录下载次数
      let url = `${this.SERVICE_PORTAL}/mp/upgrade/media/increase/${sessionStorage.getItem('appid')}/${this.fileId}`
      this.$get(url).then()
    },
    // 格式化素材大小
    formatMediaSize (fileSize) {
      let size = Number(fileSize || 0)
      if (size / 1024 < 1) {
        return `${size}B`
      } else if (size / 1024 < 1024) {
        return `${(size / 1024).toFixed(2)}KB`
      } else if (size / (1024 * 1024) < 1024) {
        return `${(size / (1024 * 1024)).toFixed(2)}MB`
      }
    },
    init () {
      // 获取文件的详情
      let url = `${this.SERVICE_PORTAL}/mp/upgrade/media/${sessionStorage.getItem('appid')}/file/${this.fileId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          if (!res.data) {
            this.$toast('文件不存在')
            return false
          }
          console.log(res.data)
          this.fileInfo = res.data
          this.loading = false
          this.emailUrl = 'mailto:?subject=分享一个来自「诊断罗辑」微信的资料链接&body=' +
                          `${location.origin}${this.BASE_URL}${this.VERSION}/download/${this.fileId}?sessionId=${sessionStorage.getItem('sessionId')}` +
                          ' 建议关注「诊断罗辑」官方微信：IVDPDWIS'
          this.setWxToolMenuAndShare({
            shareInfo: {
              title: this.fileInfo.mediaName
            }
          })
        }
      })
    }
  },
  created () {
    this.fileId = this.$route.params.fileId
    this.init()
  }
}
</script>

<style lang='stylus' scoped>
.pdf-wrapper
  color #222
  background #f5f5f5
  min-height 100vh
  padding 15px 10px
  box-sizing border-box
  user-select none
  .pdf-detail
    padding: 15px
    text-shadow: 0 1px 0 #fff
    display: block
    border: 1px solid #c8c8c8
    border-radius: 10px
    background: linear-gradient(#fefefe, #eee) repeat scroll 0 0 #eee
    margin-bottom 15px
    &:after
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    .detail-icon
      width: 39px;
      height: 39px;
      margin-top: 3px;
      background: url('~assets/img/ic_wenjian_tongyong@2x.png') no-repeat 0 0 / 100%;
      text-indent: -999em;
      margin-right: 15px;
      float: left;
      &.pdf
        background-image url('~assets/img/ic_pdf@2x.png')
      &.doc
        background-image url('~assets/img/ic_word@2x.png')
      &.ppt
        background-image url('~assets/img/ic_ppt@2x.png')
      &.excel
        background-image url('~assets/img/ic_excel@2x.png')
      &.video
        background-image url('~assets/img/ic_video@2x.png')
      &.voice
        background-image url('~assets/img/ic_voice@2x.png')
      &.image
        background-image url('~assets/img/ic_image@2x.png')
    .detail-title
      font-weight: bold;
      font-size: 16px;
      line-height: 1.4;
    .detail-info
      float: left
      color: #666;
      font-size 14px
      line-height: 1.6;
      margin-top: 5px;
  .pdf-btn
    color: #222;
    line-height 1.8
    cursor: pointer;
    text-shadow: 0 1px 0 #fff;
    border: 1px solid #c8c8c8;
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 15px;
    display: block;
    text-align: center;
    border-radius: 10px;
    background: linear-gradient(#fefefe, #eee) repeat scroll 0 0 #eee;
    user-select none
    span
      border-top: 1px solid #fafafa;
      padding: 6px 0;
      display: inline-block
  .pdf-tip
    font-size: 14px
    line-height: 1.8
    text-align: center;
    color: rgb(102, 102, 102)
</style>
